<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/request.js"></script>

    <!--  script标签 也会发送http请求到src指定的url  => 返回响应的文本  -->
    <!-- type="text/javascript"  将请求来的文本作为js语句解析  -->
    <!-- php接口返回的是json字符串 => 在script脚本中,将请求来的文本作为js语句解析  => JS对象 =>无法解析 -->
    <!-- <script type="text/javascript"
        src="http://192.168.58.247/2210_php/jsonp/searchOrderLimit.php?wd=&col=id&type=asc&page=1&size=10"></script> -->

    <!-- 
        {status,message,maxPage,total,current,list}   => 
     -->






</head>

<body>
</body>
<script>
    // 同源 和 跨域

    // 同源策略
    // 同源策略：同源策略（Same origin policy）是一种约定,它是浏览器最核心也最基本的安全功能,由客户端访问某一个服务器的文件时，如果发起请求的这个来源与进行响应的目标的源不一致，目标源出于安全的角度，将拒绝这次访问。

    // 协议名、域名、端口，这三项都相同，则被称为同源。
    // 三项中只要有一项不同，则被称为跨源(跨域)。


    // 跨域的目的: 得到对方服务器的允许 => 变可以访问对方服务器的数据

    // 跨域方法1:  CORS
    // 对方服务器配置CORS(跨域资源共享协议)

    // 跨域方法2:  Jsonp
    // 原理: 引入资源不受同源策略的限制(可以跨域访问) => 一个服务器的前端可以引入另一个服务器的 img css js

    // 前端: 提供函数的声明
    // 对方服务器后端: 以函数形式返回数据

    // 前端提供函数声明 + script动态请求后端接口=>返回函数调用 =>  执行既定的函数


    function searchOrderLimitCallback(data) {
        console.log("函数执行:", data);
    }

    // 动态创建script标签放到页面中
    // var script = document.createElement("script");
    // script.src = `http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php?wd=&col=id&type=asc&page=1&size=10&cb=searchOrderLimitCallback`;
    // // script 在没有放到页面中之前 都是存储在内存当中 => 并不会发送请求 =>
    // document.body.append(script);
    // script.onload = function () {
    //     console.log("脚本加载完毕");
    //     this.remove();
    // }


    function Jsonp(options) {//options = {url,data,jsonp,jsonpCallback}

        var { url, data = "", jsonp = "cb", jsonpCallback = "fn" } = options;

        var script = document.createElement("script");
        // script.src = `http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php?wd=&col=id&type=asc&page=1&size=10&cb=searchOrderLimitCallback`;

        if (data) {
            if (data instanceof Object) { // 判断数据是否是纯对象 (有问题!后续补充)

                var list = [];

                for (var key in data) {
                    var val = data[key];
                    list.push(`${key}=${val}`);
                }
                // console.log(list);

                data = list.join("&");

                // console.log(data);
            }

            script.src = url + "?" + data;
            if (jsonp && jsonpCallback) {
                script.src += `&${jsonp}=${jsonpCallback}`
            }
        } else {
            script.src = url;
            if (jsonp && jsonpCallback) {
                script.src += `?${jsonp}=${jsonpCallback}`
            }
        }



        // script 在没有放到页面中之前 都是存储在内存当中 => 并不会发送请求 => 
        document.body.append(script);
        script.onload = function () {
            console.log("脚本加载完毕");
            this.remove();
        }

    }

    Jsonp({
        url: "http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php",
        data: {
            wd: "",
            col: "id",
            type: "asc",
            page: 1,
            size: 10,
        },
        jsonp: "cb",
        jsonpCallback: "searchOrderLimitCallback",
    })




</script>

<!--  script标签 也会发送http请求到src指定的url  => 返回响应的文本  -->
<!-- type="text/javascript"  将请求来的文本作为js语句解析  -->
<!-- php接口返回的是函数调用形式的文本 => 在script脚本中,将请求来的文本作为js语句解析  => 函数调用 -->
<!-- <script type="text/javascript"
    src="http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php?wd=&col=id&type=asc&page=1&size=10&cb=searchOrderLimitCallback"></script> -->

<!-- 
    fn({"status":true,"message":"OK","total":74,"maxPage":8,"current":"1","list":[{"id":"1","name":"\u5f20\u4e09","class":"2210","chinese":55,"math":66,"english":78,"total":199},{"id":"2","name":"\u674e\u56db","class":"2210","chinese":66,"math":77,"english":88,"total":231},{"id":"3","name":"\u738b\u4e94","class":"2210","chinese":78,"math":65,"english":81,"total":224},{"id":"4","name":"\u5c0f\u516d","class":"2210","chinese":50,"math":58,"english":64,"total":172},{"id":"5","name":"\u97e6\u9171","class":"2210","chinese":90,"math":95,"english":89,"total":274},{"id":"6","name":"\u5362\u672c\u4f1f","class":"2210","chinese":55,"math":69,"english":87,"total":211},{"id":"7","name":"\u5c0f\u751c\u751c","class":"2210","chinese":48,"math":77,"english":51,"total":176},{"id":"8","name":"\u5200\u5c0f\u5200","class":"2210","chinese":80,"math":63,"english":77,"total":220},{"id":"9","name":"\u9648\u4e16\u8c6a","class":"2210","chinese":99,"math":52,"english":64,"total":215},{"id":"10","name":"\u4f60\u597d\uff01","class":"2210","chinese":40,"math":90,"english":75,"total":205}]})

 -->

</html>